import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

/*
* Model / View
*/

Rectangle {
	width: 360;
	height: 300;
	color: "#EEEEEE";
	Component {
		id: phoneDelegate;
		Item {
			id: wrapper;
			width: parent.width;
			height: 30;

			MouseArea {
				anchors.fill: parent;
				onClicked: wrapper.ListView.view.currentIndex = index;
			}

			RowLayout {
				anchors.left: parent.left;
				anchors.verticalCenter: parent.verticalCenter;
				spacing: 8;
				Text {
					id: coll;
					text: name;
					color: wrapper.ListView.isCurrentItem?"red":"black";
					font.pixelSize: wrapper.ListView.isCurrentItem?22:18;
					Layout.preferredWidth: 120;
				}

				Text {
					text: cost;
					color: wrapper.ListView.isCurrentItem?"red":"black";
					font.pixelSize: wrapper.ListView.isCurrentItem?22:18;
					Layout.preferredWidth: 80;
				}

				Text {
					text: manufacturer;
					color: wrapper.ListView.isCurrentItem?"red":"black";
					font.pixelSize: wrapper.ListView.isCurrentItem?22:18;
					Layout.fillWidth: true;
				}
			}
		}
	}

	ListView {
		id: listView;
		anchors.fill: parent;
		delegate: phoneDelegate;

		model: ListModel {
			id: phoneModel;
			ListElement {
				name: "iPhone 3GS";
				cost: "1000";
				manufacturer: "Apple";
			}
			ListElement {
				name: "iPhone 4";
				cost: "1800";
				manufacturer: "Apple";
			}
			ListElement {
				name: "iPhone 4s";
				cost: "2300";
				manufacturer: "Apple";
			}
			ListElement {
				name: "iPhone 5";
				cost: "4900";
				manufacturer: "Apple";
			}
			ListElement {
				name: "B199";
				cost: "1590";
				manufacturer: "HuaWei";
			}
			ListElement {
				name: "Mi 2S";
				cost: "1999";
				manufacturer: "XiaoMi";
			}
			ListElement {
				name: "GALAXY S5";
				cost: "4699";
				manufacturer: "Samsung";
			}
		}

		focus: true;
		highlight: Rectangle {
			color: "lightblue";
		}
	}
}
